//判断输入内容长度大于零显示删除按钮
let inp = document.querySelectorAll('.re-inp')
// console.log(inp);
let reDel = document.querySelectorAll('.re-del')
// console.log(reDel);

inp.forEach(function(dom,i) {
    dom.addEventListener('input', function() {
        
        if (dom.value.length > 0) {
            reDel[i].style.display = 'block'
        }else if (dom.value.length === 0) {
            reDel[i].style.display = 'none'
        }
    })
})
//点击删除内容
reDel.forEach(function(dom,i) {
    dom.addEventListener('click', function(){
        inp[i].value = ''
        this.style.display = 'none'
    })
})



//正则表达式
let regArr = [
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
  ]
//输入内容验证,显示提示内容
let errorTip = document.querySelectorAll('.re-inp-box p')
inp.forEach(function(dom,i) {
    dom.addEventListener('blur', function() {
        if(regArr[i].test(this.value)) {
            errorTip[i].style.display = 'none'
        }else {
            errorTip[i].style.display = 'block'
        }
    })
})
//勾选后启用注册按钮
let changeBtn = document.querySelector('.change-btn')
let reBtn = document.querySelector('.re-btn')

changeBtn.addEventListener('change', function() {
    if (changeBtn.checked) {
        reBtn.disabled = false
        reBtn.style.backgroundColor = '#00bdff'
    } else {
        reBtn.disabled = true
        reBtn.style.backgroundColor = '#ccc'
    }
})



//点击注册按钮验证所有输入内容
reBtn.addEventListener('click', function() {
    // console.log(1);
    for (let i = 0; i < inp.length; i++) {
        if(regArr[i].test(this.value)) {
            errorTip[i].style.display = 'none'
        } else {
            errorTip[i].style.display = 'block'
            return
        }
        
    }
})